import React, { useEffect, useState } from "react";
import { Table, Button, message as antdMessage, Row, Col, Input } from "antd";
import { ColumnsType } from "antd/es/table";
import axios from "axios";
import { useLocation, useNavigate } from "react-router-dom";
import { debounce } from "lodash";
interface ListItem {
  isVerify: boolean;
  id: string;
  name: string;
  address: string;
  tel: string;
  sex: string;
  age: number;
}

const Index = () => {
  const [list, setList] = useState<ListItem[]>([]);
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search.slice(1));
  const value = searchParams.get("value") || "";
  const navigate = useNavigate();

  const columns: ColumnsType<ListItem> = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "城市",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "电话",
      dataIndex: "tel",
      key: "tel",
    },
    {
      title: "性别",
      dataIndex: "sex",
      key: "sex",
    },
    {
      title: "操作",
      render(_) {
        return (
          <div>
            <Button onClick={() => fetchVerify(_.id)}>审核</Button>
          </div>
        );
      },
    },
  ];

  const fetchList = async () => {
    const resp = await axios.get("/api/person/verifys", { params: { value } });
    setList(resp.data.data);
  };

  const fetchVerify = async (id: string) => {
    const resp = await axios.get("/api/person/verify/" + id);
    const { code, message } = resp.data;
    if (code === 200) {
      fetchList();
      antdMessage.success(message);
    }
  };

  useEffect(() => {
    fetchList();
  }, [location]);

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", margin: "10px 0" }}>
        <span style={{ whiteSpace: "nowrap" }}>搜索：</span>
        <Input.Search
          placeholder="请搜索内容"
          onSearch={debounce((value) => {
            navigate({
              pathname: "/person/verify",
              search: `value=${value}`,
            });
          }, 400)}
        ></Input.Search>
      </div>
      <Table<ListItem>
        rowKey={(record) => record.id}
        dataSource={list}
        columns={columns}
      ></Table>
    </div>
  );
};

export default Index;
